<template>
  <view class="evaluate-con">
    <view class="body">
      <view class="center">
        <view
          class="goodsStyle acea-row row-between"
          v-if="orderCon.productInfo"
        >
          <view class="pictrue">
            <image :src="orderCon.productInfo.image" class="image" />
          </view>
          <view class="text acea-row row-between">
            <view class="name line1">{{ orderCon.productInfo.storeName }}</view>
            <view class="skus">
              <view class="">{{ orderCon.productInfo.attrInfo.sku }}</view>
              <!-- <view class="num">x{{ orderCon.cartNum }}</view> -->
            </view>

            <!-- <view class="money">
              <view>￥{{ orderCon.productInfo.price }}</view>
              <view class="num">x{{ orderCon.cartNum }}</view>
            </view> -->
          </view>
        </view>
        <view class="score">
          <view
            class="item acea-row row-middle"
            v-for="(item, scoreListIndexw) in scoreList"
            :key="scoreListIndexw"
          >
            <view>{{ item.name }}</view>
            <view class="starsList">
              <text
                @click="stars(starsIndexn, scoreListIndexw)"
                v-for="(itemn, starsIndexn) in item.stars"
                :key="starsIndexn"
                class="iconfont"
                :class="
                  item.index >= starsIndexn
                    ? 'icon-shitixing font-color-red'
                    : 'icon-kongxinxing'
                "
              ></text>
            </view>
            <text class="evaluate">{{
              item.index === -1 ? '' : item.index + 1 + '分'
            }}</text>
          </view>
          <view class="textarea">
            <textarea
              placeholder="商品满足你的期待么？说说你的想法，分享给想买的他们吧~"
              v-model="expect"
            ></textarea>

            <view class="UpdateImages">
              <BaseUpload
                :fileList="imgList"
                type="image"
                @success="uploadFile"
                @del="delFile"
              ></BaseUpload>
            </view>

            <!-- <view class="list acea-row row-middle">
              <view
                class="pictrue"
                v-for="(item, uploadPicturesIndex) in uploadPictures"
                :key="uploadPicturesIndex"
              >
                <image :src="item" />
                <text
                  class="iconfont icon-guanbi1 font-color-red"
                  @click="uploadPictures.splice(uploadPicturesIndex, 1)"
                ></text>
              </view>
              <view
                class="pictrue uploadBnt acea-row row-center-wrapper row-column"
                @tap="chooseImage"
              >
                <text class="iconfont icon-icon25201"></text>
                <view>上传图片</view>
              </view>
            </view> -->
          </view>
        </view></view
      ></view
    >
    <view class="btnContainer">
      <view class="evaluateBnt bgcolor addBtn" @click="submit"
        >立即评价</view
      ></view
    >
  </view>
</template>
<style scoped lang="less">
.evaluate-con .score .textarea .list .pictrue.uploadBnt {
  border: 1px solid #ddd;
  margin: 0 0 28rpx 0;
}

.evaluate-con {
  padding: 24rpx;
  .body {
    .center {
      background-color: #fff;
      border-radius: 20rpx;
      padding: 24rpx;
    }
    .goodsStyle {
      padding: 0;
    }
    .text {
      width: 520rpx;
    }
    .score {
      padding: 0;
      margin-top: 40rpx;
      border-top: 0;
    }
    .name {
      width: 100%;
    }
    .skus {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    .textarea {
      padding: 0;
      width: 100%;
      background-color: #fff;
    }
  }
}

.bgcolor {
  background-color: #FF5900;
  position: fixed;
  bottom: 0;
}

.btnContainer {
  width: 100%;
  height: 140rpx;
  background-color: #fff;
  box-shadow: 0px 0px 0px rgba(197, 202, 207, 0.5);
  position: fixed;
  bottom: 0;
  left: 0;
  .addBtn {
    font-size: 0.3 * 100rpx;
    color: #fff;
    width: 6.9 * 100rpx;
    height: 0.86 * 100rpx;
    border-radius: 0.43 * 100rpx;
    text-align: center;
    line-height: 0.86 * 100rpx;
    margin-top: 0.45 * 100rpx;
    height: 90rpx;
    margin: 25rpx 30rpx;
    line-height: 90rpx;
    text-align: center;
    border-radius: 50rpx;
    font-size: 28rpx;
    color: #fff;
    background: #FF5900;
  }
}
</style>
<script>
import { postOrderProduct, postOrderComment } from '@/api/store'
import { trim, chooseImage } from '@/utils'
import { BaseUrl } from '@/common/config.js'
import { required } from '@/utils/validate'
import { validatorDefaultCatch } from '@/utils/dialog'

const NAME = 'GoodsEvaluate'

export default {
  name: NAME,
  components: {
    // VueCoreImageUpload
  },
  props: {},
  data: function () {
    return {
      imgList: [],

      orderCon: {
        cartProduct: {
          productInfo: {},
        },
      },
      scoreList: [
        {
          name: '商品质量',
          stars: ['', '', '', '', ''],
          index: -1,
        },
        {
          name: '服务态度',
          stars: ['', '', '', '', ''],
          index: -1,
        },
      ],
      // uploadPictures: [],
      expect: '',
      unique: '',
    }
  },
  mounted: function () {
    this.unique = this.$yroute.query.id
    this.getOrderProduct()
  },
  watch: {
    $yroute(n) {
      if (n.name === NAME && this.unique !== n.params.id) {
        this.unique = n.params.id
        this.$set(this.scoreList[0], 'index', -1)
        this.$set(this.scoreList[1], 'index', -1)
        this.expect = ''
        this.imgList = []
        this.getOrderProduct()
      }
    },
  },
  methods: {
    // 上传图片
    uploadFile(e) {
      this.imgList = [...this.imgList, ...e]
      console.log(111, this.imgList)
      // this.option.imgUrls = this.list.join(',')
      // this.option.imgUrls = this.imgList
    },
    // 删除图片
    delFile(e) {
      this.imgList.splice(e, 1)
    },

    getOrderProduct: function () {
      let that = this,
        unique = that.unique
      postOrderProduct(unique).then(res => {
        that.orderCon = res.data
        console.log('数据', this.orderCon)
      })
    },
    stars: function (indexn, indexw) {
      this.scoreList[indexw].index = indexn
    },
    // chooseImage() {
    //   chooseImage(img => {
    //     this.uploadPictures.push(img)
    //   })
    // },
    async submit() {
      const expect = trim(this.expect),
        product_score =
          this.scoreList[0].index + 1 === 0 ? '' : this.scoreList[0].index + 1,
        service_score =
          this.scoreList[1].index + 1 === 0 ? '' : this.scoreList[1].index + 1
      try {
        await this.$validator({
          product_score: [
            required('请选择商品质量分数', {
              type: 'number',
            }),
          ],
          service_score: [
            required('请选择服务态度分数', {
              type: 'number',
            }),
          ],
        }).validate({
          product_score,
          service_score,
        })
      } catch (e) {
        return validatorDefaultCatch(e)
      }
      postOrderComment({
        productScore: product_score,
        serviceScore: service_score,
        unique: this.unique,
        pics: this.imgList.join(','),
        comment: expect,
      })
        .then(() => {
          uni.showToast({
            title: '评价成功',
            icon: 'success',
            duration: 2000,
          })

          // ? 回跳到上一页
          this.$yrouter.back()

          // ? 默认跳转到详情页
          // this.$yrouter.push({
          // 	path: "/packageShop/pages/order/OrderDetails/index",
          // 	query: {
          // 		id: this.orderCon.orderId
          // 	}
          // });

          // ? 可选重定向到详情页，这时左上角会有一个返回首页的图标
          // this.$yrouter.reLaunch({
          // 	path: "/pages/home/index",
          // });
        })
        .catch(err => {
          uni.showToast({
            title:
              err.msg || err.response.data.msg || err.response.data.message,
            icon: 'none',
            duration: 2000,
          })
        })
    },
  },
}
</script>
